A couple of days back I got an email request from one of my friends who wanted to know that how can he customize the context menu for items in the document library for WSS 3.0, and the very next day I was assigned a project at my job in which I had to do exactly this as one of the requirements. So today I am writing this post to put a little light on how we can customize the context menu for items in a document library. Ok I am going to illustrate this with the help of an example problem.
Problem Statement:
Whenever we upload an excel file in the document library, the context menu should have an extra item in named as lets say "View Excel Sheet as a webpage" ofcourse in this post I am not going to illustrate how we would render that excel sheet as webpage to the user but this is just to give you an idea of how things are done. This menu item would also have an "excel" like icon along site it and whenever we will click on the menu item it would just alert the user the location of the excel file .i.e. where it is stored with reference to the site.
Ok now having stated the problem lets get to some basics first.
The context menu is itself a javascript program means that the context menu is generated by a javascript code . This javascript program can be found at
\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\Core.js
Yes the name of the file has changed to Core.js from ows.js, menus in Windows SharePoint Services and SharePoint Portal Server 2003 were located in a javascript files at the following location
\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\ows.js Ok now lets dig in a bit in the Core.js file, in the Core.js file the main function responsible for the document library drop down menus is AddDocLibMenuItems(m, ctx) and this provides a hook by which we can insert additional menu items.
The first few lines of the function are as follows
if (typeof(Custom_AddDocLibMenuItems) !="undefined")
{
if (Custom_AddDocLibMenuItems(m, ctx))
return;
}
Ok now what this piece of code does? it is basically looking as to whether a function named Custom_AddDocLibMenuItems is defined or not, if it is defined then it simply calls it. So the main idea here is to override this Custom_AddDocLibMenuItems function by our own script which we can use to extend the context menu, adding new items.
Note: It is recommended that you make a copy of your Core.js before you make any changes to it.
Ok now we can override the Custom_AddDocLibMenuItems function in core.js adding our own script as follows.function Custom_AddDocLibMenuItems(m, ctx)
{
var strDisplayTextCustom = ‘View Excel Sheet in Browser’;
setDocType();
if(currentItemAppName.toLowerCase() == "microsoft office excel")
{
strAction="alert(ctx.HttpRoot+unescapeProperly(currentItemFileUrl))";
var strImagePath = ctx.imagesPath+"XLS16.GIF";
// Add menu item
CAMOpt(m, strDisplayTextCustom, strAction, strImagePath);
// add a separator to the menu
CAMSep(m);
}
return false;
}
How does the function above works?
The Custom_AddDocLibMenuItems function takes two parameters m and ctx, the first parameter m is basically representing the menu object itself, where as ctx provides HTTP context information about the web request. To add an item to the menu only one function call is needed.
CAMOpt(m, strDisplayTextCustom, strAction, strImagePath);The CAMOpt function takes 4 parameters which are as follows:
1) The menu object to add item to.
2) The display text of the menu item.
3) Javascript action to perform when item is clicked.
4) Path to an image associated with the menu item.
Having done all this simply save the Core.js file and open your sharepoint site and a few excel sheets to the document library and check its context menu. The context menu should be as shown in the image below.
Oz's Personal Blog 
Yasir Attiq said
Great Post ….. Oz.
This is really helpful.
Jerry
jateen said
hey buddy nice information for rss really gr8 help thanks ..my blog address is http://www.jateeng.blogspot.com do visit it hope we both can be blogging frens do reply on my blog.
Seema said
Thanks for such nice informative blog. Its really helpful for understanding sharepoint development. I just want to add a comment; Instead of showing an laert on Action, if you show the Action procedure; how to transform excel document into web page, it makes this article perfect.
Can we do same for other office documents just by getting document type?
Usman said
I havent tested as yet, but should work for other document types as well. Secondly may be in a second part to this article I can discuss how can we render office documents as webpages. Thanx for the comments.
Sanaa said
This is one of the best posts I have seen on this topic! very easy to understand. Good work.
Unknown said
I am a professional SharePoint Developer myself. I must say this is a wonderfully written post. I am planning to start my own blog will invite you to it soon.
F said
This post has been very informative and helpful.
Excellent Job Oz!
Fatima
Mary said
Wonderful post! you saved my job!.God bless you.
Unknown said
really helpful post..
Unknown said
wonderful oz. It was very useful. Please continue to post such type of articles
Adam said
I would suggest you do not modify these files as they could be overwritten by a service pack in the future. The supported way to achieve this is using a Feature:
http://msdn2.microsoft.com/en-us/library/bb418731.aspx
Monalee said
hi!
thats wonderful 🙂
Can i ask what to do if I want to add a custom "send to destination"
I am looking for multiple desitnations hence have to add multiple links 🙂
Asif said
This is great very simple post.
Unknown said
Hi!
Thanks for the great article.
This concept works for SharePoint Lists too. In order to customize Lists context menu, Custom_AddListMenuItems(m, ctx) javascript function should be added in the same file.
I would like to ask a question, that could be interesting for everyone who deals with custom SharePoint Context menus.
How I can define a custom context menu item to appear for the certain List/Document Library only. I\’m developing feature that is relevant for ListItems in specific List only, and I would like SharePoint displays my context menu for ListItems in this List only. The sample provided by you displays custom menus in all DocLibs within entire SharePoint sites collection. Is there any way to add menu item for specific DocLib only?
Thanks in advance,
Michael.
Unknown said
Hi,Do you need advertising displays, digital signages, advertising player and LCD displays? Please go Here:www.amberdigital.com.hk(Amberdigital).we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.
amberdigital Contact Us
E-mail:sstar@netvigator.com
website:www.amberdigital.com.hk
alibaba:amberdigital.en.alibaba.com[ad
Unknown said
Hi,Do you have used LCD monitors, second hand lcd monitors and second hand flat screens? Please go here:www.sstar-hk.com(Southern Stars).We are constantly buying re-usable LCD panels,LCD recycle.The re-usable panels go through strictly designed process of categorizing, checking, testing, repairing and refurbishing before they are re-used to make remanufactured LCD displays and TV sets.Due to our recent breakthrough in testing and repairing technology of LCD, we can improve the value for your LCD panels.
website:www.sstar-hk.com[edfffdedcaicab]
Unknown said
Hi,Do you have used LCDs, second hand LCDs, used flat screens and used LCD monitors? Please go here:www.sstar-hk.com(Southern Stars).We are constantly buying re-usable LCD panels and working for LCD recycling.The re-usable panels go through strictly designed process of categorizing, checking, testing, repairing and refurbishing before they are re-used to make remanufactured LCD displays and TV sets.Due to our recent breakthrough in testing and repairing technology of LCD, we can improve the value for your LCD panels.
website:www.sstar-hk.com[idggjafefgfagj]
Miled said
Dear Oz., Great article.Actually I\’m looking for something related to this.Can we disable this java script on specific list or SharePoint site ?I have an announcement list web part on my MOSS homepage. I need to disable the context dropdown menu for this list.Just keep the items linked to the announcements page , but hide or disable the context drop down menu.That would save another job ;)Thank You
Peter said
I have requirement which need to add the custom content menu item to picture library. Neither Custom_AddListMenuItems(m, ctx) nor Custom_AddDocLibMenuItems(m, ctx) will work. Could someone tell me how to do it for Picture Library?Thanks in advance, Peter
Unknown said
This is really a nice article. But I have one question. Here you have modified Custom_AddDocLibMenuItems() in the same file but what needs to be done if we want to define this function in seperate .js file ? how core .js will identify the function Custom_AddDocLibMenuItems() defined in another .js file ?
T8tube.com said
OK